<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            font-size: 30px;
        }

        .box1 {
            background: red;
            display: block;
        }

        .box2 {
            background: blue;
            display: none;
        }

        .box3 {
            background: yellow;
            display: none;
        }
    </style>
</head>

<body>
    <div class="container">
        <button class="btn">按钮一</button>
        <button class="btn">按钮二</button>
        <button class="btn">按钮三</button>
        <div class="box1">1</div>
        <div class="box2">2</div>
        <div class="box3">3</div>
    </div>
    <div class="container2">
        <button class="btn">按钮一</button>
        <button class="btn">按钮二</button>
        <button class="btn">按钮三</button>
        <div class="box1">1</div>
        <div class="box2">2</div>
        <div class="box3">3</div>
        <button class="next">下一页</button>
    </div>

    <div class="container3">
        <button class="btn">按钮一</button>
        <button class="btn">按钮二</button>
        <button class="btn">按钮三</button>
        <div class="box1">1</div>
        <div class="box2">2</div>
        <div class="box3">3</div>
    </div>
    <script>
        // 分析 选项卡对象-----》共性问题 和特性问题 ----》共性问题抽离（类，一类事物） 出来分析 ---》特性问题单独处理


        // 选项卡类 ： 所有选项卡的共性功能；
        // 所有选项卡对象共有的功能；
        function Tab(btns, divs) {
            var nowK = 0;
            btns.forEach((btn, k) => {
                btn.onclick = function () {
                    console.log(k);
                    nowK = k;
                    switchTab(k);
                }
            })

            function switchTab(k) {
                divs.forEach((div, key) => {
                    if (key == k) {
                        div.style.display = "block";
                    } else {
                        div.style.display = "none";
                    }
                })
            }
            return { switchTab: switchTab, nowK: nowK };
        }




        // 特殊功能
        // 第一个选项卡
        var btns = document.querySelectorAll(".container .btn");
        var divs = document.querySelectorAll(".container div");
       var tab1 =  Tab(btns, divs);

        // 第二个选项卡
        var btns2 = document.querySelectorAll(".container2 .btn");
        var divs2 = document.querySelectorAll(".container2 div");
        var tab2 = Tab(btns2, divs2);

        // //第二个选项卡 特性功能 ；下一个功能
        var nextBtn = document.querySelector(".next");
        var num = 0;
        nextBtn.onclick = function () {
            console.log(num);
            tab2.switchTab(num);
            num++;
            if (num == 3) {
                num = 0;
            }
        }


        // 第三个选项卡
        var btns3 = document.querySelectorAll(".container3 .btn");
        var divs3 = document.querySelectorAll(".container3 div");
        var tab3 = Tab(btns3, divs3);

        var num2 = 0;
        setInterval(() => {
            tab3.switchTab(num2);
            num2++;
            if (num2 == 3) {
                num2 = 0;
            }
        }, 1000)





    </script>
</body>

</html>